import React from 'react';
import './Shanghuo.css'
import { Table} from 'antd';
import Sousuo from './Sousuo'
import { Button,message} from 'antd';
import axios from "axios"
import Tianjia from "./Fromtian"
import Xiugai from "./Xiugai_cb"






class Shanghuo extends React.Component{
    constructor(){
        super();
        this.state={
            data:[],
            vb: "hidden",
            xiugai: "hidden",
            gai: "hidden"
        }
        this.columns = [
            {
                title: '商品id',
                dataIndex: 'id',
                key: 'id',
                align:'center'
            },
            {
                title: '商品名称',
                dataIndex: 'name',
                key: 'name',
                align:'center'
            },
            {
                title: '商品价格',
                dataIndex: 'price',
                key: 'price',
                align:'center'
            },
            {
                title: '商品数量',
                key: 'number',
                dataIndex: 'number',
                align:'center'
            },
            {
                title: '操作',
                dataIndex:'',
                key: 'id',
                ellipsis: true,
                align:'center',
                render:(record)=>
                    <div className="cb_but">
                      {/*  <Button type='primary' className='xiugai' onClick={()=>this.updatedata(record)}>修改</Button>*/}
                        <Xiugai/>
                        <Button type='primary' danger className='delete' onClick={()=>this.deletedata(record.key)}>删除</Button>
                    </div>
            },
        ];
    }
    render() {
        let {xiugai,vb}=this.state
        return(

                <div className="content" style={{margin:10,height:500}}>
                    <div className="cb_tou">
                        <div className="cb_sousuo">
                            <Sousuo/>
                        </div>
                        <div className="cb_buttom">
                            <Tianjia/>
                            <Button className="cb_but1" onClick={this.tijiao} type="primary">上货提交</Button>
                        </div>
                    </div>
                    <Table bordered={true} pagination={{
                        position:['bottomCenter'],
                        defaultPageSize:5
                    }} columns={this.columns} dataSource={this.state.data} />
                    {/*<div className="tianjia" style={{visibility:vb}}>*/}
                    {/*    <Button style={{backgroundColor:"#1890FF",float:"right"}}*/}
                    {/*            onClick={this.tijiao4} type="primary" >*/}
                    {/*        X*/}
                    {/*    </Button>*/}
                    {/*    <br/>*/}
                    {/*    <Tianjia/>*/}
                    {/*    <Button style={{backgroundColor:"#1890FF",width:100,marginLeft:220}}*/}
                    {/*            onClick={this.tijiao1} type="primary">提交</Button>*/}
                    {/*</div>*/}


                    {/*<div className="xiugai_cb" style={{visibility:xiugai}}>
                        <Button style={{backgroundColor:"#1890FF",float:"right"}}
                                onClick={this.tijiao3} type="primary" >
                            X
                        </Button>
                        <br/>
                        <Xiugai/>
                        <Button style={{backgroundColor:"#1890FF",width:100,marginLeft:220}}
                                onClick={this.tijiao2} type="primary">确定修改</Button>
                    </div>*/}

                </div>
        )
    }
    //点击添加商品的时候
    tianjia=()=>{
        this.setState({
            vb: 'visible',
        })

    }
    //点击提交的时候
    tijiao1=()=>{
        this.setState({
            vb: 'hidden',
        })
        message.success("添加成功")
    }
    //添加商品模态框的x
    tijiao4=()=>{
        this.setState({
            vb: 'hidden',
        })
        message.success("退出添加商品")
    }
    //点击确认修改的时候
    tijiao2=()=>{
        this.setState({
            xiugai: 'hidden',
        })
        message.success("修改成功")
    }
    //点击修改模态框的X
    tijiao3=()=>{
        this.setState({
            xiugai: 'hidden',
        })
        message.success("退出修改")
    }
    //点击上货的时候
    tijiao=()=>{
        console.log(123)
        message.success("上货成功")
    }

    //点击修改的时候
    updatedata=()=>{
        //这个record 是当前行的数据
       /* message.success('修改成功')*/
        //可以渲染对应的数据在模态框中
        this.setState({
            xiugai: 'visible',
        })
    }
    deletedata=()=>{
        //请求后台，返回消息
        //这里的key 就是id ,通过record.key获得
        message.success('删除成功')
    }
    componentDidMount(){
        axios({
            url:'http://123.57.67.148:3000/mock/60/cbgetgoods',
            method:'get'
        }).then(res=>{
            console.log(res)
            this.setState({
                data:res.data.data
            })
        })
    }
}
export default Shanghuo
